<template>
  <div class="zu">
    <div class="zu-header">
      <div @click="handleNO">
        <span class="icon iconfont icon-zuo"></span>
      </div>
      <div>求租</div>
      <!-- <div class="geng">
        <span class="icon iconfont">&#xe639;</span>
        <span class="icon iconfont">&#xe60f;</span>
      </div> -->
      <span></span>
    </div>
    <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" @change="changeSelects"/>
        <van-dropdown-item v-model="value2" :options="option2" @change="changeSelect"/>
      </van-dropdown-menu>
    <div class="zu-mian">
      <div class="zu-footer">
      <dl v-for="(item, index) in arr.length ? arr:list" :key="index">
        <ul>
          <li><span></span>{{ item.name }}</li>
          <li>{{ item.img }}</li>
          <li>{{ item.times }}</li>
        </ul>
        <ol>
          <p class="p1">{{ item.title }}</p>
          <p class="p2">
            <span>
              <span>意向区域:{{ item.qu }}</span>
              <span
                >意向价格: <span class="many">{{ item.jiage }}</span></span
              >
            </span>
            <span class="p3"
              ><button @click="handleMessage">
                <span class="icon iconfont icon-ico_duanxin"></span></button
              ><button @click="handleIhpone">
                <span class="icon iconfont">&#xe603;</span>
              </button></span
            >
          </p>
        </ol>
      </dl>
    </div>
    </div>
    
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      name: "Zu",
      value1: 0,
      value2: "a",
      option1: [
        { text: "房产类型", value: 0 },
        { text: "高层住宅", value: 1 },
        { text: "小高层住宅", value: 2 },
        { text: "商铺/门面房", value: 3 },
        { text: "厂房", value: 4 },
        { text: "写字楼", value: 5 },
        { text: "独院/别墅", value: 6 },
        { text: "车库", value: 7 },
      ],
      option2: [
        { text: "区域选择", value: "a" },
        { text: "昌平区", value: "b" },
        { text: "丰台区", value: "c" },
        { text: "朝阳区", value: "d" },
      ],
      list: "",
      arr:[],
      qu:"",
      shi:"",
    };
  },
  created() {
    this.getlist();
  },
  methods: {
    getlist() {
      axios.get("/qiuzu").then((res) => {
        this.list = res.data.data;
        console.log(this.list, "11111");
      });
    },
    handleNO() {
      this.$router.push("/index");
    },
    handleMessage(){
      this.$router.push("/message")
    },
    handleIhpone(){
      this.$router.push("/ihpone")
    },
     changeSelect(val){  
       if(val==='b'){
         this.arr=this.list.filter(item=>item.qu==='昌平区')
       }else if(val==='c'){
         this.arr=this.list.filter(item=>item.qu==='丰台区')
       }else if(val==='d'){
         this.arr=this.list.filter(item=>item.qu==='朝阳区')
       }else{
         this.arr=[],
         this.getlist()
       }
         console.log(val,"123333")
     },
     changeSelects(val){  
       if(val===0){
         this.arr=this.list.filter(item=>item.shi==='房产类型')
       }else if(val===1){
         this.arr=this.list.filter(item=>item.shi==='高层住宅')
       }else if(val===2){
         this.arr=this.list.filter(item=>item.shi==='小高层住宅')
       }else if(val===3){
         this.arr=this.list.filter(item=>item.shi==='商铺/门面房')
       }else if(val===4){
         this.arr=this.list.filter(item=>item.shi==='厂房')
       }else if(val===5){
         this.arr=this.list.filter(item=>item.shi==='写字楼')
       }else if(val===6){
         this.arr=this.list.filter(item=>item.shi==='独院/别墅')
       }else if(val===7){
         this.arr=this.list.filter(item=>item.shi==='车库')
       }else{
         this.arr=[],
         this.getlist()
       }
         console.log(val,"123333")
     }
  },
};
</script>
<style scoped>
.zu{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.zu-mian{
  flex: 1;
  overflow-y: scroll;
}
.zu-footer ul {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  font-size: 15px;
}
.zu-footer ol {
  padding: 15px;
  border-bottom: 10px solid rgb(228, 225, 225);
}
.zu-footer ol p {
  padding: 10px 0;
}
.zu-footer ul span {
  /* border: 1px solid #ccc; */

  /* background: rgba(224, 219, 219, 0.986); */
  margin-left: 10px;
}
.zu-footer ul li .iconfont {
  font-size: 20px;
}
.zu-header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  height: 50px;
  font-size: 20px;
  background: rgb(6, 121, 230);
  align-items: center;
  color: #fff;
  position: sticky;
}
.zu-header .iconfont {
  font-size: 20px;
}
.geng {
  border: 1px solid #ccc;
  border-radius: 30px;
  display: flex;
  justify-content: space-between;
}
.geng span {
  padding: 3px 5px;
}
.p1 {
  border-bottom: 1px solid #ccc;
}
.p2 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  text-align: center;
  align-items: center;
}
.p3 button {
  background: rgb(240, 170, 170);
  border: none;
  padding: 5px;
  border-radius: 20px;
}
.p3 button .iconfont {
  color: red;
}
.many {
  color: orange;
}
</style>